<!-- 左侧面板 -->
<template>
  <ModelTile class="hyqk" title="项目明细表" :is-download="true" :is-more="false" :is-input="true" bg-img-class="longestImage"
    :isSearch="true">
    <div class="leftText" style="">基础设备投资项目</div>
    <div class="hyqk-content">
      <ZTable :columns="columns" :data-source="aicInfos" :scroll="{ y: 90 }" size="small" :pagination="false">
        <template #bodyCell="{ column, text }">
          <div class="tz" v-if="column.dataIndex == 'aicName'">
            <img :src="getImage(text)" :alt="text" />
          </div>
        </template>
      </ZTable>
    </div>
  </ModelTile>
</template>
<script lang="ts">
import { ref, defineComponent, computed, inject } from 'vue'
import ModelTile from '@/components/modleTitle/index.vue'
import ZTable from '@/components/z-table/index'
import { Column } from '@/interface/table'
import { useRouter } from 'vue-router'
const httpApi: any = inject('$http')
const listDataBank = ref([])
function getInitData() {
  /**
  httpApi.cityFixedAssets1Api
    .projectDetails({})
    .then((res: any) => {
      if (res.success) {
        listDataBank.value = res.body || []
      } else {
        console.error('系统异常')
      }
    })
    .catch((err: any) => {
      console.error(err || '系统异常')
    })
  */
  listDataBank.value = [
    {
      aicName: 'RED',
      projectaicName: 'xxxx项目',
      invCrColor: '广受水电费亿',
      reserveRateColor: '前期',
      ziduan1: 1,
      ziduan2: 1,
      ziduan3: 1,
      ziduan4: 1
    },
    {
      aicName: 'YELLOW',
      projectaicName: 'xxxx项目',
      invCrColor: '广受水电费亿',
      reserveRateColor: '前期',
      ziduan1: 2,
      ziduan2: 1,
      ziduan3: 1,
      ziduan4: 1
    },
    {
      aicName: 'RED',
      projectaicName: 'xxxx项目',
      invCrColor: '广受水电费亿',
      reserveRateColor: '前期',
      ziduan1: 3,
      ziduan2: 1,
      ziduan3: 1,
      ziduan4: 1
    },
    {
      aicName: 'GREEN',
      projectaicName: 'xxxx项目',
      invCrColor: '广受水电费亿',
      reserveRateColor: '前期',
      ziduan1: 4,
      ziduan2: 1,
      ziduan3: 1,
      ziduan4: 1
    }
  ];
}
getInitData()
export default defineComponent({
  name: 'hyqk',
  components: {
    ModelTile,
    ZTable
  },
  props: {
    // 父级统计数据
    statAllData: {
      type: Object,
      default: {}
    }
  },
  setup(props) {
    const router = useRouter()
    // 表头
    const columns: Column[] = [
      {
        dataIndex: 'aicName',
        title: '进度',
        width: '10%',
        ellipsis: true,
        align: 'left'
      },
      {
        dataIndex: 'projectaicName',
        title: '项目名称',
        width: '15%',
        ellipsis: true,
        align: 'left'
      },
      {
        dataIndex: 'invCrColor',
        title: '业主单位',
        width: '15%',
        ellipsis: true,
        align: 'left'
      },
      {
        dataIndex: 'reserveRateColor',
        title: '建设阶段',
        width: '10%',
        ellipsis: true,
        align: 'left'
      },
      {
        dataIndex: 'ziduan1',
        key: 'ziduan1',
        title: '总投资',
        width: '10%',
        ellipsis: true,
        align: 'left',
        sorter: (a: aicInfos, b: aicInfos) => a.ziduan1 - b.ziduan1
      },
      {
        dataIndex: 'ziduan2',
        key: 'ziduan2',
        title: '年度计划投资',
        width: '10%',
        ellipsis: true,
        align: 'left',
        sorter: (a: aicInfos, b: aicInfos) => a.ziduan2 - b.ziduan2
      },
      {
        dataIndex: 'ziduan3',
        key: 'ziduan3',
        title: '本年实际完成投资',
        width: '10%',
        ellipsis: true,
        align: 'left',
        sorter: (a: aicInfos, b: aicInfos) => a.ziduan3 - b.ziduan3
      },
      {
        dataIndex: 'ziduan4',
        title: '所属行业',
        width: '15%',
        ellipsis: true,
        align: 'left'
      }
    ]
    const listData = listDataBank;
    // 通过计算属性实时获取父级传递的 列表数据
    const aicInfos = computed(() => props.statAllData?.aicInfos || listData.value)
    // 获取icon
    function getImage(name: string) {
      return new URL(`/src/assets/images/globalCommon/${name}.png`, import.meta.url).href
    }
    return {
      columns,
      aicInfos,
      getImage
    }
  }
})
</script>
<style lang="scss" scoped>
.hyqk {
  color: #fff;
  margin-bottom: 40vh * $Bh;

  :deep(.content) {
    padding: 0;
    border-radius: 12vh * $Bh;
    height: 395vh * $Bh;
    background: initial;
  }

  :deep(.z-table) {
    .ant-table {
      .ant-table-container {
        .ant-table-body {
          overflow-y: scroll;
          max-height: 190vh * $Bh !important;

          &::-webkit-scrollbar {
            background-color: #030c22;
            width: 1px;
          }
        }

        table {
          .ant-table-thead {
            .ant-table-cell-scrollbar {
              box-shadow: none;
            }

            .ant-table-cell {
              padding: 25vh * $h 0;
              font-size: 32vh * $Bh;

              &:first-child {
                padding-left: 34vw * $w;
              }
            }
          }

          th {
            background-color: #213b76 !important;
          }

          .ant-table-tbody {
            .ant-table-row {
              .ant-table-cell {
                &:first-child {
                  padding-left: 34vw * $w;
                }
              }
            }
          }

          .ant-table-tbody>tr>td {
            font-size: 32vh * $Bh !important;
            background-color: #152c61;
          }

          .ant-table-tbody>tr:nth-child(even) {
            background-color: #152c61;
          }
        }
      }
    }
  }

  .leftText {
    width: 10%;
    float: left;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #152c61;
  }

  .hyqk-content {
    height: 100%;
    float: left;
    width: 90%;

    .tz {
      display: flex;
      align-items: center;
      height: 30vh * $h;
      padding-bottom: 3vh * $h;

      img {
        width: 48vh * $h;
        height: 48vh * $h;
      }
    }
  }
}
</style>
